<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
${aier_doctype}
<html <s:property value="aier-html-xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/multiselect.css" />
<link rel="stylesheet" href="${aier_css_url}jc/chosen.css">
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/classes/common.css" />
<link rel="stylesheet" href="${aier_css_url}social/classes/cmanage.css" />


<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}ui.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/ja.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/multiselect.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/arrayList.js"></script>
<script type="text/javascript" src="${aier_js_url}social/classes/cminvite.js"></script>
</head>
<script type="text/javascript">
	var global_suffix = "${aier_suffix}", global_url = "${aier_url}", global_uri = "${aier_uri}", global_urijs = "${aier_urijs}", 
	global_cid = "${cid}",global_tid = "${tid}";
</script>
<!-- 班级成员邀请页面 -->
<body>
	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user"
		executeResult="true"></s:action>

	<!-- 正文 -->

	<div id="cmiContent" class="ar-content">
		<div class="content-main">
			<!-- 班级名称栏 -->
			<s:action name="ccomm_classesMTitle" namespace="/classes"
				executeResult="true"></s:action>
			<div class="main-content wrap-bg clearfix">
				<!-- 左侧栏 -->
				<s:action name="ccomm_classesMLeft" namespace="/classes"
					executeResult="true"></s:action>
				<!-- 右侧内容 -->
				<div class="ae-right">
					<div class="right-main">
						<div class="right-main-top">
							<div class="binfo-title">
								<span>成员邀请</span>
							</div>
							<div class="right-line"></div>
						</div>
						<div class="right-main-c">
							<div id="tabsCm">
								<ul>
									<li><a href="#tabs-1">创建学生账号</a>
									</li>
									<li><a href="#tabs-2" onclick="showCsInviteInfo()">邀请家长</a> 
									</li>
									<li><a href="#tabs-3" onclick="showCtInviteInfo()">邀请老师</a>
									</li>
								</ul>
								<div id="tabs-1">
									<div id="createStu" class="create-stu">
										<p class="prompt">请输入还没加入班级的学生名字，帮他们创建账号吧！</p>
										<div class="ipt-stu-n">
											<label for="">学生名：</label> <input type="text" id="name_student"
												placeholder="请输入学生名"> <a id="creatStuBtn"
												href="javascript:;" class="creare-stu-btn"><em>创建</em> </a>
											<!-- 提示信息弹出层 -->
											<div id="fmtStuExist">
												<span style="font-size: 14px; color: #f94342;"><span id="sname_exit1" ></span>已经存在!</span>
												<br><br> 
												<span style="font-size: 12px; color: #575757;">需要再添加一个<span id="sname_exit2" ></span>么?</span>
											</div>
										</div>

									</div>
								</div>
								<div id="tabs-2">

									<p class="prompt">请从下拉列表中选择学生，您可以邀请一个学生的多名家长！</p>
									<div class="info-tab01">
										<table id="inviteParTable">
											<thead>
												<tr>
													<th class="gray6">学生姓名</th>
													<th class="gray6">关系</th>
													<th class="gray6">家长姓名</th>
													<th class="gray6">手机号码</th>
													<th>&nbsp;</th>
													<th>&nbsp;</th>
												</tr>
											</thead>

											<tbody>
												<tr>
													<td><select id="cStuNameSel_0"
														data-placeholder="请选择学生" Class="chosen" tabindex="1">
															<c:forEach var="student" items="${classStudentList }">
																<option value="${student.csid}">${student.sname}</option>
															</c:forEach>
													</select></td>
													<td><select id="cStuRelSel_0" data-placeholder="请选择关系"
														Class="chosen" tabindex="1">
															<option value="爸爸">爸爸</option>
															<option value="妈妈">妈妈</option>
															<option value="家长">家长</option>
													</select></td>
													<td><input type="text" id="cParName_0"
														placeholder="请输入家长名">
													</td>
													<td><input type="text" id="cParPhone_0"
														placeholder="请输入手机号">
													</td>
													<td><a id="inpaDelBtn" href="javascript:;"
														class="creare-stu-btn"><em>删除</em> </a>
													</td>
													<td><a id="inpaAddBtn" href="javascript:;"
														class="creare-stu-btn"><em>添加</em> </a>
													</td>
												</tr>
											</tbody>

										</table>
									</div>
									<div class="cpa-invite-btn">
										<a id="cpaInviteBtn" href="javascript:;"
											class="creare-stu-btn" onclick="invite_parent();"><em>邀请</em> </a>
									</div>
									<div class="right-main-down">
										<div class="binfo-title">
											<h4>邀请记录</h4>
										</div>
										<div class="down-line"></div>

										<div class="down-inre">
											<table id="csInviteInfo"></table>
											<div id="csInvitePage"></div>
										</div>
									</div>
								</div>
								<div id="tabs-3">
									<p class="prompt">请填写相关资料，邀请教师一起参与班级互动吧！</p>
									<div class="info-tab01">
										<table id="inviteTeaTable">
											<thead>
												<tr>
													<th class="gray6">教师姓名</th>
													<th class="gray6">职务</th>
													<th class="gray6">手机号码</th>
													<th>&nbsp;</th>
													<th>&nbsp;</th>
												</tr>
											</thead>

											<tbody>
												<tr>
													<td><input type="text" id="cTeaName_0"
														placeholder="请输入教师名">
													</td>
													<td><select id="cTeaGraSel_0" data-placeholder="请选择职务"
														Class="chosen" tabindex="1">
															<option value="-1">请选择</option>
															<c:forEach var="sg" items="${schoolGradeList }">
																<option value="${sg.gid}">${sg.name}</option>
															</c:forEach>
													</select></td>
													<td><input type="text" id="cTeaPhone_0"
														placeholder="请输入手机号">
													</td>
													<td><a id="inTeaDelBtn" href="javascript:;"
														class="creare-stu-btn"><em>删除</em> </a>
													</td>
													<td><a id="inTeaAddBtn" href="javascript:;"
														class="creare-stu-btn"><em>添加</em> </a>
													</td>
												</tr>
											</tbody>

										</table>
									</div>
									<div class="cpa-invite-btn">
										<a id="cteInviteBtn" href="javascript:;"
											class="creare-stu-btn" onclick="invite_teacher();"><em>邀请</em> </a>
									</div>
									<div class="right-main-down">
										<div class="binfo-title">
											<h4>邀请记录</h4>
										</div>
										<div class="down-line"></div>

										<div class="down-inre">
											<table id="ctInviteInfo"></table>
											<div id="ctInvitePage"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>

	<div id="hfFooter" class="ar-footer"></div>
</body>
<script type="text/javascript">
	$("#tabsCm").tabs();
	$(".chosen").chosen();

	//添加学生
	function addstudent(){
		var funadd = function(data) {
			if (data.s == 1) {
				$().message("创建成功!");
				$("#fmtStuExist").dialog("close");
				//3秒后执行
				setTimeout("reloadStuList()",3000);
			} else {
				$().message("创建失败!");	
			}
		};
		exeAjax(ajaxUrl("${aier_url}${aier_urijs}cminvite_addClassStudent${aier_suffix}"), funadd, {
			"cid" : global_cid,
			"name" : $("#name_student").val()
		});
	}
	
	$(function() {
		//添加班级弹出层
		$("#fmtStuExist").dialog(
			{
				//背景变暗
				modal : true,
				autoOpen : false,
				show : "fade",
				hide : "fade",
				width : "340",
				height : "220",
				buttons : {
					"确定" : addstudent,
					"取消" : function() {
						$(this).dialog("close");
					}
				}
			});
		//创建学生按钮
		$("#creatStuBtn").click(function() {
			var name_student = $("#name_student").val();
			if(name_student==""){
				$().message("请输入学生名!");
				return false;
			}
			var funcheck = function(data){
				if (data.s == 0) {
					$("#sname_exit1").html(name_student);
					$("#sname_exit2").html(name_student);
					$("#fmtStuExist").dialog("open");
				} else {
					addstudent();
				}
			};
			exeAjax(ajaxUrl("${aier_url}${aier_urijs}cminvite_checkClassStudent${aier_suffix}"), funcheck, {
				"cid":global_cid,
				"name":name_student});
		});
	});
	
	//刷新页面
	function reloadStuList(){
		window.location.reload(true);
	}
	
	var sid = 0;
	var sidList = "0,";
	//增加学生<tr/>
	$("#inpaAddBtn").click(
					function() {
						sid = sid + 1;
						sidList = sidList + sid + ",";
						$("#inviteParTable tbody").append(
										"<tr id='cimitr_s_"+sid+"'><td><select id='cStuNameSel_"+sid
										+"' data-placeholder='请选择学生' Class='chosen' tabindex='1'><c:forEach var='student' items='${classStudentList }'><option value='${student.csid}'>${student.sname}</option></c:forEach></select></td><td><select id='cStuRelSel_"+sid
										+ "' data-placeholder='请选择关系' Class='chosen' tabindex='1'><option value='爸爸'>爸爸</option><option value='妈妈'>妈妈</option><option value='家长'>家长</option></select></td><td><input type='text' id='cParName_"+ sid
										+ "' placeholder='请输入家长名'></td><td><input type='text' id='cParPhone_"+ sid
										+ "' placeholder='请输入手机号'></td><td><a id='inpaDelBtn_"+ sid
										+ "' href='javascript:;' class='creare-stu-btn' onclick='deltr_s("+ sid
										+ ")'><em>删除</em> </a></td><td></td></tr>");
						$(".chosen").chosen();
					});
	//删除学生<tr/>
	function deltr_s(index) {
		$("#cimitr_s_" + index).remove();//删除当前行
		sidList = sidList.replace(","+index+",", ",");
	};
	
	var tid = 0;
	var tidList = "0,";
	//增加教师<tr/>
	$("#inTeaAddBtn")
			.click(
					function() {
						tid = tid + 1;
						tidList = tidList + tid + ",";
						$("#inviteTeaTable tbody")
								.append(
										"<tr id='cimitr_t_"+tid+"'><td><input type='text' id='cTeaName_"+tid
										+"' placeholder='请输入教师名'></td><td><select id='cTeaGraSel_"+tid  
										+"' data-placeholder='请选择职务' Class='chosen' tabindex='1'><option value=''-1'>请选择</option><c:forEach var='sg' items='${schoolGradeList }'><option value='${sg.gid}'>${sg.name}</option></c:forEach></select></td><td><input type='text' id='cTeaPhone_"+tid
										+"' placeholder='请输入手机号'></td><td><a id='inTeaDelBtn' href='javascript:;' class='creare-stu-btn' onclick='deltr_t("+ tid
										+ ")'><em>删除</em> </a></td><td></td></tr>");
						$(".chosen").chosen();
					});
	//删除教师<tr/>
	function deltr_t(index) {
		$("#cimitr_t_" + index).remove();//删除当前行
		tidList = tidList.replace(","+index+",", ",");

	};

	//邀请家长
	function invite_parent(){
		var invitePar_message = "";
		var idList = sidList.split(",");//分割为Ojbect数组。 
		for(var i=0;i<idList.length;i++){ 
			var index = idList[i];
			if(index!=""){
				//取数据 csid,relation,pname,phone
				var csid = $("#cStuNameSel_"+index+" option:selected").val();
				var relation = $("#cStuRelSel_"+index+" option:selected").val();
				var pname = $("#cParName_"+index).val().trim();
				var phone = $("#cParPhone_"+index).val().trim();
				if(pname==""){
					$().message("请输入家长名");
					return 
				}
				if(phone==""){
					$().message("请输入手机号");
					return 
				}
				if(check_phone(phone)=="false"){
					$().message("手机号:" + phone + "格式有误");
					return 
				}
				invitePar_message = invitePar_message + csid + "," + relation + "," + pname + "," + phone + "@";
			}
		}
		
		var funadd = function(data){
			if (data.s == 1) {
				$().message("添加邀请成功!");
				$("#csInviteInfo").trigger("reloadGrid");
			} else {
				$().message(data.error_info);
			}
		};
		exeAjax(ajaxUrl("${aier_url}${aier_urijs}cminvite_addParentInvite${aier_suffix}"), funadd, {
			"cid":global_cid,
			"tid":global_tid,
			"invitePar_message":invitePar_message});

	}
	
	//邀请教师
	function invite_teacher(){
		var inviteTea_message = "";
		var idList = tidList.split(",");//分割为Ojbect数组。 
		for(var i=0;i<idList.length;i++){ 
			var index = idList[i];
			if(index!=""){
				//取数据 tname,gid,phone
				var tname = $("#cTeaName_"+index).val().trim();
				var gid = $("#cTeaGraSel_"+index+" option:selected").val();
				var phone = $("#cTeaPhone_"+index).val().trim();
				if(tname==""){
					$().message("请输入教师名");
					return 
				}
				if(phone==""){
					$().message("请输入手机号");
					return 
				}
				if(check_phone(phone)=="false"){
					$().message("手机号:" + phone + "格式有误");
					return 
				}
				inviteTea_message = inviteTea_message + tname + "," + gid + "," + phone + "@";
			}
		}
		var funadd = function(data){
			if (data.s == 1) {
				$().message("添加邀请成功!");
				$("#ctInviteInfo").trigger("reloadGrid");
			} else {
				$().message(data.error_info);
			}
		};
		exeAjax(ajaxUrl("${aier_url}${aier_urijs}cminvite_addTeacherInvite${aier_suffix}"), funadd, {
			"cid":global_cid,
			"tid":global_tid,
			"inviteTea_message":inviteTea_message});	
	}
	
	//检查手机号
	function check_phone(phone){
		var regu = /^[1]([3-8][0-9]{1}|59|58|88|89)[0-9]{8}$/;
		var isphone = regu.exec(phone);
		if(isphone!=null){
			return "true";
		}else{
			return "false";
		}
	}
	
</script>
</html>